<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus'
  import { Search } from '@element-plus/icons-vue';


  // 模拟数据
  const tableData = ref([
    {
      name: '青铜', // 会员名称
      price: 500, // 优惠点
      openTime: '2024-01-15 10:30:00', // 开通时间
      status: 0, // 状态：注册中
      date: '2024-12-01 14:20:00' // 更新时间
    },
    {
      name: '白银',
      price: 800,
      openTime: '2024-02-20 11:45:00',
      status: 1, // 状态：正常
      date: '2024-12-02 09:15:00'
    },
    {
      name: '黄金',
      price: 1200,
      openTime: '2024-03-10 08:00:00',
      status: 2, // 状态：正常
      date: '2024-12-03 16:30:00'
    },
  ]);
  // 当前页码
  const currentPage = ref(1);
  // 每页显示数量
  const pageSize = ref(1);

  // 计算总页数
  const totalPage = ref(Math.ceil(tableData.value.length / pageSize.value));

  // 切换页码时的处理函数
  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
    console.log('currentPage:',currentPage.value);
  };
  const router = useRouter();
  // 显示用户详情
  const showUserDetail = (row: any) => {
   
    console.log('row:',row);
    // 打开一个新的页面显示用户详情
    // 这里可以用路由的方式打开新的页面
    router.push({ name: 'user_detail', query: { id: row.id } });
  }
  onMounted(() => {
    console.log('mounted')
  });
</script>

<template>
  <div class="user-list">
    
    <div style="margin-top: 20px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="会员" width="150" />
        <el-table-column prop="price" label="优惠点" width="150">
          <template #default="scope">
            <!-- 根据不同的status值显示不同的文本 -->
            <span style="color: #1570EF;">{{scope.row.price}}</span><span style="color: #FD7401;">￥</span>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" label="开通时间" width="200" />
        
        <el-table-column prop="status" label="状态" width="300">
          <template #default="scope">
            <!-- 根据不同的status值显示不同的文本 -->
            <el-tag v-if="scope.row.status === 0" type="warning" >注册中</el-tag>
            <el-tag v-if="scope.row.status === 1"  type="success" >正常</el-tag>
            <el-tag v-if="scope.row.status === 2"  type="info" >冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="更新时间" width="200" />
        
        <!-- <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showUserDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        layout="total, prev, pager, next "
        @current-change="handleCurrentChange"
      /> -->
    </div>
  </div>
</template>
<style scoped>
  .top-div {
    width:100%;
    /* height:100px; */
    background-color:#FFFFFF;
    display:flex;
    align-items:center;
    box-sizing: border-box;
    /* justify-content:space-between; */
    padding:20px 20px;
    flex-wrap:wrap;
  }
  .top-div-right {
    display:flex;
    align-items:center;
    margin-right: 20px;
    margin-left:200px;
  }
  .top-div-right-img {
    width:28px;
    height:30px;
    margin-right:70px;
  }
</style>